<template>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <el-form :inline="true" :model="params.entity"
                 style="padding-bottom: 0px;">
          <!--          <el-form-item label="ID">-->
          <!--            <el-input v-model="params.entity.id"-->
          <!--                      placeholder="请输入"/>-->
          <!--          </el-form-item>-->
          <el-form-item label="代理等级名称">
<!--            <el-input v-model="params.entity.proxyLevelTitle"-->
<!--                      placeholder="请输入代理等级名称"/>-->

            <el-select v-model="params.entity.proxyLevelTitle" placeholder="请选择状态" clearable="true" style="width:160px">
              <el-option v-for="(item,index) in tableDataCategory.list" :label="item.categoryName" :value=item.id></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="状态">
            <el-select v-model="params.entity.statusFlag" placeholder="请选择状态" clearable="true" style="width:160px">
              <el-option v-for="(item,index) in STATUS_LIST" :label="item.text" :value=item.label></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" :icon="Search" @click="searchData">查询
            </el-button>
            <el-button type="primary" :icon="Plus" @click="addDialog">新增
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <el-table v-loading="loading"
              :data="tableData.list" style="width: 100%" height="500"
              :default-sort="{ prop: 'date', order: 'descending' }"
              @selection-change="handleSelectionChange">
      <el-table-column type="expand">
        <template #default="props">
          <el-descriptions title="基本信息" :column="1" border>
            <el-descriptions-item label="代理等级名称" >
              {{props.row.proxyLevelTitleName}}
            </el-descriptions-item>
            <el-descriptions-item label="代理费（元）" >
              {{props.row.proxyMoney}}
            </el-descriptions-item>
            <el-descriptions-item label="保证金（%）" >
              {{props.row.bailMoeny}} %
            </el-descriptions-item>
          </el-descriptions>

          <el-descriptions title="返现设置" :column="1" border>
            <el-descriptions-item label="季度返现2000(%)" >
              {{props.row.kf3Money}} %
            </el-descriptions-item>
            <el-descriptions-item label="半年度返现3800(%)" >
              {{props.row.kf6Money}} %
            </el-descriptions-item>
            <el-descriptions-item label="年度返现6800(%)" >
              {{props.row.kf12Money}} %
            </el-descriptions-item>
          </el-descriptions>

          <!--      普通代理和标准代理-->
          <el-descriptions v-if="!props.row.proxyLevelTitle||props.row.proxyLevelTitle==1 || props.row.proxyLevelTitle==2" title="推荐奖励" :column="1" border>
            <el-descriptions-item label="推荐普通代理奖励" >
              <template #label>
                推荐普通代理奖励
              </template>
              0万
            </el-descriptions-item>
            <el-descriptions-item label="推荐标准代理奖励" >
              <template #label>
                推荐标准代理奖励
              </template>
              2万
            </el-descriptions-item>
            <el-descriptions-item label="推荐高级代理奖励" >
              <template #label>
                推荐高级代理奖励
              </template>
              3万
            </el-descriptions-item>
            <el-descriptions-item label="推荐至尊代理奖励" >
              <template #label>
                推荐至尊代理奖励
              </template>
              8万
            </el-descriptions-item>

            <el-descriptions-item label="代理晋级" >
              <template #label>
                <span style="font-weight: bold; ">代理晋级</span>
              </template>
              <template v-if="!props.row.proxyLevelTitle||props.row.proxyLevelTitle==1">
                推荐3个普通代理晋升标准代理
              </template>
              <template v-if="props.row.proxyLevelTitle==2">
                推荐3个标准代理晋升高级代理
              </template>
            </el-descriptions-item>
          </el-descriptions>

          <!--      高级代理-->
          <el-descriptions v-if="props.row.proxyLevelTitle==3" title="推荐奖励" :column="1" border>
            <el-descriptions-item label="推荐普通代理奖励" >
              <template #label>
                推荐普通代理奖励
              </template>
              0万
            </el-descriptions-item>
            <el-descriptions-item label="推荐标准代理奖励" >
              <template #label>
                推荐标准代理奖励
              </template>
              2万 + 标准代理的10%
            </el-descriptions-item>
            <el-descriptions-item label="推荐高级代理奖励" >
              <template #label>
                推荐高级代理奖励
              </template>
              3万
            </el-descriptions-item>
            <el-descriptions-item label="推荐至尊代理奖励" >
              <template #label>
                推荐至尊代理奖励
              </template>
              8万
            </el-descriptions-item>

            <el-descriptions-item label="代理晋级" >
              <template #label>
                <span style="font-weight: bold; ">代理晋级</span>
              </template>
              推荐3个高级代理晋升至尊代理
            </el-descriptions-item>
          </el-descriptions>

          <el-descriptions v-if="props.row.proxyLevelTitle==4" title="推荐奖励" :column="1" border>
            <el-descriptions-item label="推荐普通代理奖励" >
              <template #label>
                推荐普通代理奖励
              </template>
              0万
            </el-descriptions-item>
            <el-descriptions-item label="推荐标准代理奖励" >
              <template #label>
                推荐标准代理奖励
              </template>
              2万 + 标准代理的10%
            </el-descriptions-item>
            <el-descriptions-item label="推荐高级代理奖励" >
              <template #label>
                推荐高级代理奖励
              </template>
              3万 + 高级代理10% +标准代理的5%
            </el-descriptions-item>
            <el-descriptions-item label="推荐至尊代理奖励" >
              <template #label>
                推荐至尊代理奖励
              </template>
              8万
            </el-descriptions-item>
            <el-descriptions-item label="代理晋级" >
              <template #label>
                <span style="font-weight: bold; ">代理晋级</span>
              </template>
              推荐3个至尊代理成立分公司
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </el-table-column>
      <el-table-column prop="proxyLevelTitleName" label="代理等级名称"
                       show-overflow-tooltip/>
      <el-table-column prop="proxyMoney" label="代理费（元）"
                       show-overflow-tooltip/>
      <el-table-column prop="bailMoeny" label="保证金（%）"
                       show-overflow-tooltip/>
      <el-table-column prop="kf3Money" label="季度返现（%）"
                       show-overflow-tooltip/>
      <el-table-column prop="kf6Money" label="半年度返现（%）"
                       show-overflow-tooltip/>
      <el-table-column prop="kf12Money" label="年度返现（%）"
                       show-overflow-tooltip/>
      <!--      <el-table-column prop="statusFlag" label="状态 0-停用 1-启用 2-备用"-->
      <!--                       show-overflow-tooltip/>-->
      <!--      <el-table-column prop="delFlag" label="是否删除 0-否 1-是"-->
      <!--                       show-overflow-tooltip/>-->
      <!--      <el-table-column prop="createUser" label="创建人"-->
      <!--                       show-overflow-tooltip/>-->
      <!--      <el-table-column prop="createTime" label="创建时间"-->
      <!--                       show-overflow-tooltip/>-->
      <!--      <el-table-column prop="updateTime" label="修改时间"-->
      <!--                       show-overflow-tooltip/>-->
      <!--      <el-table-column prop="remark" label="备注"-->
      <!--                       show-overflow-tooltip/>-->

      <el-table-column fixed="right" label="操作" width="300"
                       show-overflow-tooltip>
        <template #header>
          <el-input v-model="params.search" @keyup.enter.native="searchData"
                    placeholder="搜索角色名称/介绍"/>
        </template>
        <template #default="scope">
          <el-button link type="danger" :icon="Delete" size="small"
                     @click="showDeleteDialog(scope.row.id)">删除
          </el-button>
          <el-button link type="primary" :icon="Edit" size="small"
                     @click="editDialog(scope.row)">编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination :currentPage="params.current" :page-size="params.size"
                   :page-sizes="[100, 200, 300, 400]"
                   layout="sizes, prev, pager, next" :total="tableData.total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"/>
  </el-card>

  <!-- 新增或者修改页面-->
  <ProxyMechanismAddOrEdit
      @closeEditDialog="closeEditDialog"
      :addOrEditVisible="addOrEditVisible"
      :ruleForm="ruleForm"
      :categoryList="tableDataCategory.list"
      :addDataType="addDataType"></ProxyMechanismAddOrEdit>
</template>

<script lang="ts" setup>
import {ElTable, ElMessage, ElMessageBox} from 'element-plus'
import {onMounted, computed, reactive, ref} from 'vue'
import {Params, Result} from "@/apis/model/common/common.interfaces"
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Plus,
  Setting
} from '@element-plus/icons-vue'
import ProxyMechanismAddOrEdit from './proxyMechanismAddOrEdit.vue'
import {ProxyMechanism} from "@/apis/model/proxy/ProxyMechanismModel";
import {
  deleteProxyMechanismById,
  proxyMechanismPage
} from "@/apis/http/proxy/ProxyMechanismHttp";
import {STATUS_LIST} from '@/util/common.util';
import {ProxyMechanismCategory} from "@/apis/model/proxy/ProxyMechanismCategoryModel";
import {proxyMechanismCategoryPage} from "@/apis/http/proxy/ProxyMechanismCategoryHttp";


// 查询
const params: Params = reactive({
  current: 1,
  size: 10,
  search: '',
  entity: {} as ProxyMechanism
})

const ruleForm = ref<ProxyMechanism>({} as ProxyMechanism)

// AddOrEditVisible
const addOrEditVisible = ref(false)

// table 表数据
const tableData: any = ref({});

// 加载数据
const loading = ref(true)
const addDataType = ref('add');

/**
 * 初始化数据
 */
const initList = async () => {
  loading.value = true
  await proxyMechanismPage(params).then((res: Result) => {
    const code = res.code
    const message = res.message
    const data = res.data
    if (code == 200) {
      tableData.value = data
    }
    loading.value = false
  })
}

/**
 * search 查询数据
 */
const searchData = () => {
  initList()
}

/**
 * 每页数据量改变查询数据
 * @param val
 */
const handleSizeChange = (val: number) => {
  params.size = val
  initList()
}

/**
 * 分页查询数据
 * @param val
 */
const handleCurrentChange = (val: number) => {
  params.current = val
  initList()
}

/**
 * 添加弹出
 */
const addDialog = () => {
  addOrEditVisible.value = true
  ruleForm.value = {} as ProxyMechanism
  addDataType.value = 'add'
}

//修改弹窗
const editDialog = (row: ProxyMechanism) => {
  addOrEditVisible.value = true
  ruleForm.value = row
  addDataType.value = 'edit'
}

// 关闭修改弹窗
const closeEditDialog = (e: any) => {
  addOrEditVisible.value = e.addOrEditVisible
  if (e.refushList = true) {
    params.current = 1;
    initList();
  }
}

/**
 * 弹出删除对话框
 */
const showDeleteDialog = (id: number) => {
  ElMessageBox.confirm('是否删除?', '提醒', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteProxyMechanismById(id).then((res: Result) => {
      const code = res.code;
      if (code == 200) {
        ElMessage({
          message: '删除数据成功！',
          type: 'success',
        })
        initList();
      } else {
        ElMessage.error('删除数据失败！');
      }
    })
  }).catch(() => {
    // ElMessage({
    //   type: 'info',
    //   message: 'Delete canceled',
    // })
  })
}


// 查询
const paramsCategory: Params = reactive({
  current: 1,
  size: 10,
  search: '',
  entity: {} as ProxyMechanismCategory
})

const tableDataCategory: any = ref({});

const initListCategory = async () => {
  await proxyMechanismCategoryPage(paramsCategory).then((res: Result) => {
    const code = res.code
    const message = res.message
    const data = res.data
    if (code == 200) {
      tableDataCategory.value = data
    }
  })
}


onMounted(async () => {
  console.log('dddddddd')
  await initListCategory();
  await initList()
})
</script>

<style scoped lang="less">

::v-deep .el-descriptions__label {
  width: 200px;
}
</style>
